<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {
            width: 360px;
            border: 1px solid #000;
            padding: 10px;
        }
        form>label {
            display: flex;
        }
        label>span {
            width: 64px;
            /* 所有字段名文本右对齐 */
            text-align: right;
            /* 垂直方向居中 */
            height: 30px;
            line-height: 30px;
        }
        label>input {
            width: 280px;
            /* 边框 * 2 + 内边距 * 2 = 6px */
            height: 24px;
            /* 获取焦点之后的输入框边框，设置成无 */
            outline: none;
        }
        label>img {
            width: 120px;
            height: 30px;
        }
    </style>
    <script src="jQuery/jquery-3.7.1.js"></script>
    <script>
        $(document).ready(function () {
            // 为验证码图片添加点击事件，点击后重新获取一张图片
            // 图片的点击事件在表单中会右默认行为
            $('#code').click(function (event) {
                // 阻止默认行为，防止左侧的验证码输入框获取焦点
                event.preventDefault()
                // 原本的src='user?type=getCode'
                // 增加一个临时参数，参数值为时间戳，保证每次的地址不同
                // 服务端不会处理这个time的参数
                $('#code').attr('src', 'user?type=getCode&time='
                    + new Date().getTime() + "'")
            })
        })

        /* 校验验证码 */
        function toVerifyCode() {
            if ($("input[name='username']").val().trim() === '') {
                alert('未填写用户名')
                return
            }
            if ($("input[name='password']").val().trim() === '') {
                alert('未填写密码')
                return;
            }
            if ($("input[name='code']").val().trim() === '') {
                alert('未填写验证码')
                return
            }
            $.ajax({
                url: 'user',
                type: 'POST',
                data: {
                    type: 'verifyCode',
                    code: $("input[name='code']").val()
                },
                success: function (result) {
                    if (result.code === 200) {
                        // 发注册的请求
                        toRegistry()
                    } else {
                        alert(result.msg)
                    }
                }
            })
        }

        /* 发起注册请求，就不需要携带验证码了 */
        function toRegistry() {
            $.ajax({
                url: 'user',
                type: 'POST',
                data: {
                    type: 'registry',
                    username: $("input[name='username']").val(),
                    password: $("input[name='password']").val()
                },
                // 系统层面请求/响应正常：哪怕业务层面是不成功
                success: function (result) {
                    console.log(result)
                    if (result.code === 200) {
                        // 注册成功
                        location.href = 'login1.html'
                    } else {
                        alert(result.msg)
                    }
                },
                // 系统层面的错误：
                // 请求方法不兼容（405）、服务端内部错误（500）、资源不存在（404）
                error: function (error) {
                    console.log(error)
                }
            })
        }
    </script>
</head>
<body>
<form>
    <label>
        <span>账号：</span>
        <input type="text" name="username">
    </label><br/>
    <label>
        <span>密码：</span>
        <input type="password" name="password">
    </label><br/>
    <label>
        <span>验证码：</span>
        <!-- 验证码输入框的宽度，是上面2个框宽度（280px） - 图片的宽度（120px） - 右外边距（10px） = 150px -->
        <input type="text" name="code" style="width: 150px;margin-right: 10px">
        <img src="user?type=getCode" alt="" id="code">
    </label><br/>
    <button type="button" onclick="toVerifyCode()">注册</button>
    <button type="button" onclick="location.href = 'login1.html'">去登录</button>
</form>
</body>
</html>